<template>
  <div>
    <header>
        <n-bar></n-bar>
    </header>
    <!-- 表单 -->
    <van-form @submit="register">
      <van-field
        v-model="user.phone"
        name="手机号"
        label="手机号"
        placeholder="请输入手机号"
        :rules="[{ pattern, required: true, message: '请输入正确的手机格式' }]"
      />
      <van-field
        v-model="user.nickname"
        name="昵称"
        label="昵称"
        placeholder="请输入昵称"
        :rules="[{ required: true, message: '请输入昵称' }]"
      />
      <van-field
        v-model="user.password"
        type="password"
        name="密码"
        label="密码"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请输入密码' }]"
      />
        <p @click="$router.push('/login')">已有账号？去登录</p>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >注册</van-button
        >
      </div>
    </van-form>

  </div>
</template>

<script>
//引入登录接口
import { register } from "../requset/app";
// 引入轻提示
import { Toast } from "vant";
export default {
  data() {
    return {
      user: {
         phone: "",
        nickname: "",
        password: "",
      },
      //正则的校验 可以通过pattern 这个属性进行一个设定
      pattern: /1\d{10}/
    };
  },
  methods: {
    register() {

     register(this.user).then((res) => {
        console.log(res, "注册");
        if (res.code == 200) {
          Toast(res.msg);
          this.$router.push("/login");
        } else {
          Toast(res.msg);
        }
      });
    },
  },
};
</script>

<style scoped>
/* 头部 */
header {
  background-color: #ff6040;
  box-sizing: border-box;
  margin-bottom: 0.1rem;
}

/* 顶部信息 */
header .top_box {
  height: 0.44rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.06rem 0 0.17rem;
  box-sizing: border-box;
}

header .top_box > a span {
  font-size: 0.17rem;
  color: #ffffff;
}

header .top_box h2 {
  opacity: 0.8;
  font-size: 0.17rem;
  color: #ffffff;
  margin-left: 0.23rem;
}

header .top_box .more {
  width: 0.87rem;
  height: 0.32rem;
  background: rgba(255, 119, 51, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.405rem;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

header .top_box .more .line {
  width: 1px;
  height: 0.19rem;
  background: rgba(255, 255, 255, 0.25);
}

header .top_box .more a span {
  font-size: 0.19rem;
  opacity: 0.8;
  color: #ffffff;
}
.van-form p{
  float: right;
  margin-right: 20px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: #999;
}
</style>
